<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>吃什么</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../css/home.css" />
		<link rel="stylesheet" href="../../css/tabbar.css" />
		<link rel="stylesheet" href="../../css/tabswiper.css" />
		<link rel="stylesheet" href="../../css/swiper.min.css" />
		<link rel="stylesheet" href="../../css/goods.css" />
		<link rel="stylesheet" href="../../css/category.css" />
		<link rel="stylesheet" href="../../css/order.css" />
		<link rel="stylesheet" href="../../css/cart.css" />
		<link rel="stylesheet" href="../../js/layer/layer.css" />
		<script type="text/javascript" src="../../js/layer/layer.js"></script>
		<script type="text/javascript" src="../../js/util/loading.js"></script>
		<script type="text/javascript" src="../../js/util/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="../../js/util/swiper.min.js"></script>
		<script type="text/javascript" src="../../js/util/app.js"></script>
		<script type="text/javascript" src="../../js/ui/tabbar.js"></script>
		<script type="text/javascript" src="../../js/ui/tab-switcher.js"></script>
		<script type="text/javascript" src="../../js/ui/category.js"></script>
		<script type="text/javascript" src="../../js/ui/category-goods.js"></script>
		<script type="text/javascript" src="../../js/ui/BottomPanel.js"></script>
		<script type="text/javascript" src="../../js/ui/RadioGroup.js"></script>
		<script type="text/javascript" src="../../js/ui/menu.js"></script>
		<script type="text/javascript" src="../../js/ui/orderMenu.js"></script>
		<script type="text/javascript" src="../../js/ui/ShoppingCart.js"></script>
		<script type="text/javascript" src="../../js/mock/index.js"></script>
		<script type="text/javascript" src="../../js/mock/category.js"></script>
		<script type="text/javascript" src="../../js/mock/cart.js"></script>
		<script type="text/javascript" src="../../js/mock/mine.js"></script>
		<script type="text/javascript" src="../../js/mock/user.js"></script>
		<script type="text/javascript" src="../../js/biz/goods/category.js"></script>
		<script type="text/javascript" src="../../js/biz/index/mine.js"></script>
		<script type="text/javascript" src="../../js/biz/index/cart.js"></script>
		<script type="text/javascript" src="../../js/biz/index/index.js"></script>
	</head>
	<body>
		<div class="page">
			<div class="router-container">
				<div class="swiper-container swiper_fragment">
					<div class="swiper-wrapper" id="fragments">
						<!-- 首页 -->
						<section class="swiper-slide swiper-no-swiping">
							<div class="fragment" style="background: var(--bg-fragment);">
								<!-- 头部标题栏 -->
								<header class="title-bar">
									<div class="location">
										<img src="../../img/ic_location.png" />
										<span id="location">广州市</span>
									</div>
									<input placeholder="关键字搜索" class="input"/>
								</header>
								<main class="content">
									<!-- 轮播 -->
									<section class="home_banner">
										<div class="swiper-container swiper_banner">
											<div class="swiper-wrapper" id="banner_box"></div>
											<div class="swiper-pagination pagination_banner"></div>
										</div>
									</section>
									<!-- 标签 -->
									<section class="tab-container" id="tab_container">
										<div class="tab-nav" id="tag_list"></div>
									</section>
									<!-- 标签对应的内容 -->
									<section class="goods_container" id="tab_content"></section>
									<!-- 加载 -->
									<section class="loading_layout" id="loading_layout" style="margin-top: 6rem;">
										<div class="spinner" id="loading_spinner">
											<div class="bounce1"></div>
											<div class="bounce2"></div>
											<div class="bounce3"></div>
										</div>
										<img id="loading_state_img" class="state_img" src="../../img/ic_empty.png" />
										<span id="loading_state_text" class="state_text">正在加载...</span>
									</section>
								</main>
							</div>
						</section>
						<!-- 分类 -->
						<section class="swiper-slide swiper-no-swiping">
							<div class="fragment">
								<header class="title-bar">
									<input placeholder="关键字搜索" class="input" />
									<button class="btn-filter" id="filter_query">筛选</button>
								</header>
								<main class="content">
									<div class="row" style="height: 100%;">
										<!-- 左侧分类 -->
										<section class="left">
											<div class="radio-category-group" id="category"></div>
										</section>
										<!-- 右侧内容 -->
										<section class="right" id="scroll_container">
											<div class="loading_layout" id="loading_layout_category">
												<div class="spinner" id="loading_spinner_category">
													<div class="bounce1"></div>
													<div class="bounce2"></div>
													<div class="bounce3"></div>
												</div>
												<img id="loading_state_img_category" class="state_img"
													src="../../img/ic_empty.png" />
												<span id="loading_state_text_category" class="state_text">正在加载...</span>
											</div>
											<div id="category_list"></div>
										</section>
									</div>
								</main>
							</div>
						</section>
						<!-- 购物车 -->
						<section class="swiper-slide swiper-no-swiping">
							<div class="fragment">
								<header class="title-bar space-between" style="align-items: baseline;">
									<div>您共选中<span class="font-price" id="quilty">0</span> 件产品</div>
									<span id="cart_edit" style="padding: 2px 6px;color: green;">编辑</span>
								</header>
								<!-- 购物车商品 -->
								<main class="content">
									<div id="cart_list"></div>
								</main>
								<!-- 购物车结算 -->
								<footer class="cart_footer">
									<label class="custom-checkbox">
										<input type="checkbox" class="check_all" />
										<span class="checkmark"></span>全选
									</label>
									<section class="total_box">
										<div class="total_box_row">
											<span class="title">总计</span>
											<span class="unit">¥</span>
											<span class="price" id="total">0</span>
											<span class="des">(不含运费)</span>
										</div>
										<div class="total_box_des">已优惠:0</div>
									</section>
									<button class="settlement" disabled>
										去结算
									</button>
								</footer>
							</div>
						</section>
						<!-- 我的 -->
						<section class="swiper-slide swiper-no-swiping">
							<div class="fragment">
								<!-- 设置和消息 -->
								<section class="top-right-box">
									<div style="position: relative;margin-right: 1.2rem;">
										<span class="badge" id="message_count"></span>
										<img src="../../img/ic_message.png" id="message" class="icon-middle" />
									</div>
									<img src="../../img/ic_settings.png" id="settings" class="icon-middle" />
								</section>
								<main class="content">
									<!-- 个人信息 -->
									<section class="row-center" id="user_info"
										style="margin: 2rem var(--gap) var(--gap);">
										<img src="../../img/ic_default_avatar.png" class="icon-avatar-large round"
											id="avatar" />
										<div class="col m-l-10">
											<span class="font-large font-bold" id="name">Three</span>
											<span class="font-third" style="margin-top: 0.6rem;"
												id="user_id">吃货号:123456789</span>
										</div>
									</section>
									<!-- 订单管理 -->
									<section class="card">
										<div class="menu-item">
											<span class="font-primary font-bold">我的订单</span>
											<div class="row-center" id="order_all">
												<span class="font-third">全部订单</span>
												<img src="../../img/ic_right.png" class="icon-small" />
											</div>
										</div>
										<div class="row-center" style="padding: var(--gap) 1rem;" id="order_menu"></div>
									</section>
									<!-- 用户菜单 -->
									<section class="card" id="menu_user"></section>
									<!-- 应用通用菜单 -->
									<section class="card" id="menu_common"></section>
								</main>
							</div>
						</section>
					</div>
				</div>
			</div>
			<!-- 分类页面右侧弹出面板 -->
			<section id="rightPanel" class="right-panel">
				<div class="row-center m-com">
					<img src="../../img/ic_circle_right.png" class="icon-middle" id="btn_close_right" />
					<!-- <span style="font-size: 24px;color: red;line-height: 24px;padding: 4px;width: 24px;height: 24px;font-weight: bold;">&times;</span> -->
					<h4 class="m-l-10">更多筛选</h4>
				</div>
				<main class="content">
					<div class="right-panel-content">
						<section class="pick_box">
							<div class="pick_item">品牌：
								<div class="pick_item_option" id="pick_brand">
									<input id="brand" placeholder="请选择" readonly>
									<img src="../../img/ic_arrow_down.png" />
								</div>
							</div>
							<div class="pick_item">价格：
								<div class="pick_item_option" id="pick_price">
									<input id="price" placeholder="请选择" readonly>
									<img src="../../img/ic_arrow_down.png" />
								</div>
							</div>
							<div class="pick_item">颜色：
								<div class="pick_item_option" id="pick_color">
									<input id="color" placeholder="请选择" readonly>
									<img src="../../img/ic_arrow_down.png" />
								</div>
							</div>
						</section>
					</div>
				</main>
				<footer class="panel-footer">
					<button class="btn-default flex-1" id="form_close">关闭</button>
					<button class="btn-warn flex-1" id="form_reset">重置</button>
					<button class="btn-primary flex-1" id="form_submit">确定</button>
				</footer>
			</section>
			<!-- 遮罩层 -->
			<div id="rightPanelOverlay" class="xpopup-panel-overlay"></div>
			<!-- 底部导航栏 -->
			<footer class="tabbar" id="tabbar"></footer>
		</div>
	</body>
</html>
